import * as THREE from 'three';
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const scene = new THREE.Scene();

const width = window.innerWidth;
const height = window.innerHeight;

import group from './group';
scene.add(group);

const camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);

const axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);

// 聚光源码
const spotLight = new THREE.SpotLight(0xffffff, 100);
spotLight.position.set(0, 0, 5);
spotLight.angle = Math.PI / 2;
scene.add(spotLight);

// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true,
    // 画布背景透明
    alpha: true,
});
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.render(scene, camera);

window.onresize = function () {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

// 循环渲染
const loopRender = () => {
    // 重新渲染
    renderer.render(scene, camera);
    // 循环执行 loopRender 函数
    requestAnimationFrame(loopRender)
}
loopRender()

// 添加相机控件控制器 OrbitControls
new OrbitControls(camera, renderer.domElement);

export const render = () => {
    const dom = document.getElementById('render-canvas');
    dom.appendChild(renderer.domElement);
}

